<template>
  <lay-layer
    title="新增"
    v-model="visible"
    :shade="true"
    :shadeClose="false"
    :shadeOpacity="0.3"
    :maxmin="true"
    :area="['400px']"
    :teleportDisabled="false"
    :btn="actionBtn"
  >
    <Loading :loading="isLoading">
      <lay-form :model="formState" ref="formRef" size="xs" style="width: 90%">
        <lay-form-item label="姓名" prop="real_name" required>
          <lay-input
            type="text"
            v-model="formState.real_name"
            placeholder="管理员姓名"
            allow-clear
          />
        </lay-form-item>

        <lay-form-item label="所属角色" prop="roles" required>
          <lay-select
            v-model="formState.roles"
            :showSearch="true"
            multiple
            allow-clear
            placeholder="请选择"
            style="width: 100%"
          >
            <lay-select-option
              v-for="(item, index) in roleList"
              :key="index"
              :value="item.role_id"
              :label="item.name"
            />
          </lay-select>
        </lay-form-item>

        <lay-form-item label="登录名" prop="user_name" required>
          <lay-input
            type="text"
            v-model="formState.user_name"
            placeholder="登录用户名"
            allow-clear
          />
        </lay-form-item>

        <lay-form-item label="用户密码" prop="password" required>
          <lay-input
            type="password"
            v-model="formState.password"
            placeholder="登录密码"
            allow-clear
          />
        </lay-form-item>

        <lay-form-item label="确认密码" prop="password_confirm" required>
          <lay-input
            type="password"
            v-model="formState.password_confirm"
            placeholder="确认密码"
            allow-clear
          />
        </lay-form-item>

        <lay-form-item label="排序" prop="sort" required>
          <lay-input-number v-model="formState.sort" placeholder="排序值" />
        </lay-form-item>
      </lay-form>
    </Loading>
  </lay-layer>
</template>
<script setup>
import { ref, nextTick } from "vue";
import { msgSuccess, msgError } from "@/utils/message";
import { add } from "@/api/user/user";
// 定义抛出的事件名称
const emit = defineEmits(["callback"]);
// 定义动态数据
const isLoading = ref(false);
const formRef = ref(undefined);
// 表单信息
const formState = ref({
  real_name: "",
  user_name: "",
  password: "",
  password_confirm: "",
  roles: [],
  sort: 100,
});
const visible = ref(false);
const actionBtn = ref([
  {
    text: "提交",
    callback: () => {
      handleSubmit();
    },
  },
  {
    text: "取消",
    callback: () => {
      visible.value = false;
    },
  },
]);
// 权限列表
const roleList = ref([]);

// 控制显示
const show = (role_list) => {
  roleList.value = role_list;

  visible.value = true;
  //初始化表单信息
  nextTick(() => {
    formRef.value.reset();
    formState.value.sort = 100;
  });
};

// 提交
const handleSubmit = () => {
  if (formState.value.real_name == "" || formState.value.real_name == null) {
    return msgError("姓名不能为空");
  }
  if (formState.value.user_name == "" || formState.value.user_name == null) {
    return msgError("登录名不能为空");
  }
  if (formState.value.password == "") {
    return msgError("密码不能为空");
  }
  if (formState.value.password !== formState.value.password_confirm) {
    return msgError("两次密码不一致");
  }
  if (formState.value.roles.length < 1) {
    return msgError("至少选择一个角色");
  }
  if (formState.value.sort == "") {
    return msgError("排序值必填");
  }

  isLoading.value = true;
  add({ form: formState.value })
    .then((result) => {
      if (result.status == 200) {
        msgSuccess(result.message);
        visible.value = false;
      } else {
        msgError(result.message);
      }
    })
    .finally(() => {
      emit("callback", "");
      isLoading.value = false;
    });
};
// 导出方法/属性给父组件
defineExpose({ show });
</script>
